<template>
  <!-- <Modal
    v-model="show"
    :ref="ref"
    title="审批"
    :transfer="true"
    v-bind="config"
    :width="config.width > 0 ? config.width : width"
  >
    <div class="content">
      <div class="left">
        <Card :title="'审批记录'">
          <Timeline>
            <TimelineItem
              v-for="item in dataSet.approvalRecords"
              :key="item.id"
            >
              <p class="time">审批时间:{{ item.values.operateTime }}</p>
              <p class="cont">审批状态:{{ item.values.status }}</p>
              <p class="cont">审批动作:{{ item.values.action }}</p>
            </TimelineItem>
          </Timeline>
        </Card>
      </div>
      <div class="right">
        <Card :title="'审批内容'">
          <approvalView
            :data="dataSet.approvalFormData"
          ></approvalView>
        </Card>
        <Card>
          <orderInfoTable :data="dataSet.approvalOrderData"></orderInfoTable>
          <sonPlanTable :data="dataSet.sonPlanTableData"></sonPlanTable>
        </Card>
      </div>
    </div>
    <div slot="footer">
      <Button type="default" @click="cancel">取消</Button>
      <Button type="primary" :loading="loading" @click="ok">确定</Button>
    </div>
  </Modal> -->
  <starModal :ref="ref" :config="config" @click="click">
    <starPage  :config="{
            title:'',
            icon:'',
            cols:[6,18],
            contentStyle:{padding:'0px'},
            left:{
              title:'审批记录',
            },
            right:{
              title:'审批内容',
            }
          }">
      <Timeline slot="leftCard">
        <TimelineItem v-for="item in dataSet.approvalRecords" :key="item.id">
          <p class="time">审批时间:{{ item.values.operateTime }}</p>
          <p class="cont">审批状态:{{ item.values.status }}</p>
          <p class="cont">审批动作:{{ item.values.action }}</p>
        </TimelineItem>
      </Timeline>

      <template slot="rightCard">
        <approvalView :data="dataSet.approvalFormData"></approvalView>
        <orderInfoTable :data="dataSet.approvalOrderData"></orderInfoTable>
        <sonPlanTable :data="dataSet.sonPlanTableData"></sonPlanTable>
      </template>
    </starPage>
  </starModal>
</template>

<script>
import orderInfoTable from "../main/orderInfoTable.vue";
import sonPlanTable from "../main/sonPlanTable.vue";
import approvalView from "./approvalView.vue";
const ref = "approvalModal";
export default {
  name: ref,
  components: { approvalView, orderInfoTable, sonPlanTable },
  inject: ["anc"],
  data() {
    return {
      ref,
      show: false,
      width: 600,
      tabname: "1",
      loading: false,
      config: {
        title: "审批内容",
        show: false,
        width: 0,
        height: 400,
        draggable: true,
        mask: true,
        closable: true,
        okText: "确定",
        cancelText: "取消",
        widthRatio: 0.5,
      },
    };
  },
  props: {
    // config: {
    //   default: () => {
    //     return {
    //       title: "",
    //       width: 0,
    //       height: 400,
    //       draggable: false,
    //       mask: true,
    //       closable: true,
    //       okText: "确定",
    //       cancelText: "取消",
    //       widthRatio: 0.7,
    //     };
    //   },
    // },
    dataSet: {
      default: () => {
        return {};
      },
    },
  },
  watch: {},
  computed: {
    pageConfig() {
      return {
        title: "审批管理",
      };
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      const obs = new ResizeObserver((entries) => {
        this.width = entries[0].contentRect.width * this.config.widthRatio;
      });
      obs.observe(this.$el);
    });
  },
  methods: {
    click(btn) {
      if (btn.text == "确定") {
        btn.loading = true;
        this.config.loading = true;
        this.anc.approvelModalOk(btn);
      } else {
        this.$set(this.config, "show", false);
      }
      this.config.loading = false;
    },
    ok() {
      this.anc.approvelModalOk();
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>
<style scoped lang="scss">
$top: 40px;
.content {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: auto;
  display: flex;
}
.left {
  width: 30%;
  height: 100%;
  padding-right: 6px;
}
.right {
  width: 70%;
  height: 100%;
  padding-left: 6px;
}
.left_cont {
  width: 15%;
  height: 100%;
  padding-right: 6px;
}
.right_cont {
  width: 85%;
  height: 100%;
  padding-left: 6px;
}
.cli-content-outline {
  height: auto;
}
</style>
